﻿/**
 * PagingToolbarResizer plugin for Ext PagingToolbar
 *
 * Contains a combobox where user can choose the pagesize dynamically
 *
 * @author    Loiane Groner <http://loianegroner.com> <http://loiane.com>
 * @date      September 2011
 * @version   1 - ported to Ext JS 4
 *
 * @license Ext.ux.PagingToolbarResizer is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */

/**
 * @class Ext.ux.PagingToolbarResizer
 *
 * Creates new PagingToolbarResizer plugin
 * @constructor
 * @param {Object} config The config object
 * 
 * How to use
 * 
	Just instatiate a new PagingToolbarResizer inside PagingToolbar plugins option:

	bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            plugins : [Ext.create('Ext.ux.PagingToolbarResizer', {options : [ 50, 100, 500 ] })]
    })
 */
Ext.define
    (
        'Ext.ux.PagingToolbarResizer',
        {
            extend: 'Ext.AbstractPlugin',
            alias: 'plugin.pagingtoolbarresizer',

            /**
             * @cfg {Ext.data.Store} options
             * The {@link Ext.data.Store} combobox should use as its data source (required).
             * You can also use an array of integers.
             * Defaults to [5, 10, 15, 20, 25, 30, 50, 75, 100, 200]
             */
            options:
                [
                    { 'Name': '5 条', 'Value': 5 },
                    { 'Name': '10 条', 'Value': 10 },
                    { 'Name': '15 条', 'Value': 15 },
                    { 'Name': '20 条', 'Value': 20 },
                    { 'Name': '25 条', 'Value': 20 },
                    { 'Name': '50 条', 'Value': 50 },
                    { 'Name': '100 条', 'Value': 100 },
                    { 'Name': '200 条', 'Value': 200 }
                ],

            /**
             * @cfg {String} mode Acceptable values are:
             * 
             * 
              'remote' : Default
             * 
              Automatically loads the {@link #store} the first time the trigger
             * is clicked. If you do not want the store to be automatically loaded the first time the trigger is
             * clicked, set to 'local' and manually load the store.  To force a requery of the store
             * every time the trigger is clicked see {@link #lastQuery}.
             * 
              'local' :
             * 
              ComboBox loads local data
             * 
             * 
             */
            mode: 'local',

            /**
             * @cfg {String} displayText
             * The message to display before the combobox (defaults to 'Records per Page')
             */
            displayText: '每页',

            constructor: function (config)
            {
                Ext.apply(this, config);

                this.callParent(arguments);
            },

            init: function (pagingToolbar)
            {
                //创建存储
                var comboStore = Ext.create
                    (
                        'Ext.data.Store',
                        {
                            fields: ['Name', 'Value'],
                            data: this.options
                        }
                    );

                //获得存储对象
                var toolbarStore = pagingToolbar.getStore();

                //创建组合框
                var combobox = Ext.create
                (
                    'Ext.form.field.ComboBox',
                    {
                        typeAhead: false,
                        triggerAction: 'all',
                        forceSelection: true,
                        lazyRender: true,
                        editable: false,
                        value: toolbarStore.pageSize,
                        cls: 'spms-grid-paging-field',
                        stateful: true,
                        stateId: _StatePath + '/Grid/PageSize',
                        width: 70,
                        queryMode: this.mode,
                        displayField: 'Name',
                        valueField: 'Value',
                        store: comboStore,
                        listeners:
                        {
                            //处理选择变化事件
                            select: function (combo, value, eOpts)
                            {
                                toolbarStore.pageSize = value[0].data.Value;
                                toolbarStore.loadPage(1);
                            },
                            //处理状态恢复事件
                            staterestore: function (combo, state, eOpts)
                            {
                                //更新存储对象每页记录数
                                toolbarStore.pageSize = combo.getValue();
                            }
                        }
                    }
                );

                //添加控件
                pagingToolbar.add('-');
                pagingToolbar.add(this.displayText);
                pagingToolbar.add(combobox);

                //处理销毁事件
                pagingToolbar.on
                (
                    {
                        beforedestroy: function ()
                        {
                            combo.destroy();
                        }
                    }
                );

            }
        }
    );
